import React, { useState } from 'react'

import TodoHead from './TodoHead'
import TodoContent from './TodoContent'
import TodoFoot from './TodoFoot'
import context from './context'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

function Todolist() {
    const [datalist, setDatalist] = useState([
        {
            id: 1,
            todo: '赚他一个亿津巴布韦币',
            date: '2022/7/20',
            done: true,
        },
        {
            id: 2,
            todo: '迎娶白富美，达到人生巅峰',
            date: '2022/7/21',
            done: false,
        },
        {
            id: 3,
            todo: '出任CEO，达到疯癫状态',
            date: '2022/7/22',
            done: false,
        },
    ])

    const addItem = (todo) => {
        const newItem = {
            id: Math.ceil(Math.random() * 1000),
            todo,
            date: new Date().toLocaleDateString(),
            done: false
        }

        setDatalist([newItem, ...datalist])
    }

    const removeItem = (id) => {

        const newDatalist = datalist.filter(item => item.id != id)
        setDatalist(newDatalist)
    }
    const completeItem = (id) => {

        // 找到相应的数据，并修改done属性
        const newDatalist = datalist.map(item => {
            if (item.id === id) {
                item.done = !item.done;
            }
            return item;
        })
        setDatalist(newDatalist)
    }

    // 过滤数据
    const [type,setType] = useState('all')
    const changeType = function(t){
        setType(t)
    }

    return (
        <context.Provider value={{ removeItem, completeItem}}>
            <div className='p-5'>
                <TodoHead addItem={addItem}></TodoHead>
                <TodoContent datalist={datalist} type={type}></TodoContent>
                <TodoFoot datalist={datalist} changeType={changeType} type={type}></TodoFoot>
            </div>
        </context.Provider>
    )
}

export default Todolist;